<template>
  <div class="container">
    <!-- 导航栏 -->
    <uni-nav-bar fixed="true" title="上传信息" statusBar="true" :border="false" left-icon="left"
      @clickLeft="back"></uni-nav-bar>
    <!-- 内容区 -->
    <div class="content">
      <p class="title">请上传头像、昵称</p>
      <div class="avatar">
        <!-- 修改头像用的透明按钮 -->
        <button class="avatar-choose-btn" open-type="chooseAvatar" @chooseavatar="chooseAvatar"></button>
        <image class="avatar-img" :src="temAvatarPath || userInfo.avatar || '/static/images/common/default-avatar.svg'"
          alt="avatar" mode="aspectFill" />
        <div class="avatar-icon">
          <image class="avatar-icon-img" src="@/static/icons/mine/camera.svg"></image>
        </div>
      </div>
      <input class="input-nickname" type="nickname" placeholder="请填写昵称" v-model="userInfo.name" />
      <button class="complete-btn" @click="completeClick">完成</button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useUser } from '@/stores/user-store';
import { back, navigateTo } from '@/utils/navigate';
import { showToast } from '@/utils/tools';
import { onLoad } from '@dcloudio/uni-app';
import { storeToRefs } from 'pinia';
import { ref } from 'vue';
import app from '@/stores/app';

const userStore = useUser()
const { uploadAvatarAndName } = userStore
const { userInfo } = storeToRefs(userStore)

const appStore = app();
const { uploadReloadUserInfo } = appStore;

//#region 路由重定向参数相关

/** 路由重定向参数 */
let routeQuery: AnyObject

// 页面加载时获取路由重定向参数
onLoad((options: any) => {
  console.log('options', options)
  routeQuery = options || {}
  console.log('routeQuery', routeQuery)
})

//#endregion

//#region 编辑头像、昵称相关

/** 临时头像地址 */
const temAvatarPath = ref('')

/** 头像选择事件 */
const chooseAvatar = (e: any) => {
  temAvatarPath.value = e.detail.avatarUrl
}

/** 「完成」按钮点击事件 */
const completeClick = async () => {
  // 检查是否有头像和昵称
  if (!temAvatarPath.value && !userInfo.value.avatar) {
    showToast('请上传头像')
    return
  }
  if (!userInfo.value.name) {
    showToast('请填写昵称')
    return
  }

  // 更新头像和昵称
  await uploadAvatarAndName(temAvatarPath.value)
  if (routeQuery.redirect) {
    navigateTo(routeQuery.redirect, JSON.parse(routeQuery.redirectQuery || '{}'))
    return
  }
  uploadReloadUserInfo(true);
  navigateTo('survey')
}

//#endregion


</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;

  display: grid;
  grid-template:
    'nav-bar' auto
    'content' 1fr
    / 1fr;

  // 内容区
  .content {
    grid-area: content;

    display: grid;
    grid-template:
      '.' 12px
      'title' auto
      '.' 12.3077vw
      'avatar' 23.0769vw
      '.' 6.1538vw
      'nickname' 11.7949vw
      '.' 30.2564vw
      'complete-btn' 10.7692vw
      '.' 1fr
      / 1fr;

    justify-items: center;
    align-items: center;

    .title {
      grid-area: title;
      justify-self: start;
      margin-left: 16px;

      font-size: 4.6154vw;
      color: #333333;
    }



    .avatar {
      grid-area: avatar;

      width: 23.0769vw;
      height: 23.0769vw;
      border-radius: 50%;

      position: relative;

      .avatar-choose-btn {
        position: absolute;
        top: 0;
        left: 0;

        width: 100%;
        height: 100%;

        opacity: 0;
        scale: 1.3;
        translate: 2vw 2vw;
      }

      .avatar-img {
        width: 100%;
        height: 100%;

        border-radius: 50%;
      }

      .avatar-icon {
        position: absolute;
        right: 0;
        bottom: 0;

        width: 6.1538vw;
        height: 6.1538vw;

        border-radius: 50%;
        background-color: rgba($color: #000000, $alpha: .6);

        .avatar-icon-img {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);

          width: 4.1026vw;
          height: 4.1026vw;

          border-radius: 50%;
        }
      }

    }

    .input-nickname {
      grid-area: nickname;

      width: 62.3077vw;
      height: 11.7949vw;

      background: #f2f8f3;
      border-radius: 4px;


      padding: 0 19px;

      font-size: 3.8462vw;
    }

    .complete-btn {
      grid-area: complete-btn;

      width: 87.6923vw;
      height: 10.7692vw;
      background: #17ce92;
      border-radius: 4px;

      color: #ffffff;
    }
  }
}
</style>
